import React from 'react';
import Label from './Label.jsx';
import Input from './Input.jsx';
import Selector from './Selector.jsx';
import FileUploader from './FileUploader.jsx';
import SelectList from './SelectList.jsx'

var Form = React.createClass({
    //getInitialState: function () {
    //    return ({
    //        //FormData: this.props.FormData
    //        //FormData: formData
    //    })
    //},
    //componentWillReceiveProps: function (newprops) {
    //    this.setState({
    //        FormData: newprops.FormData
    //    }, function () {
    //        this.render();
    //    });
    //},
    //处理selector选择结果

    _renderForm: function () {
        var formItem = [];
        var formData = this.props.FormData;
        if (formData) {
            formData.map(function (formElement) {
                switch (formElement.type) {
                    case "label":
                    {
                        var icon = null;
                        for (var i in formElement.icons) {
                            if (formElement.icons[i].type == formElement.defaultValue) {
                                icon = formElement.icons[i].icon
                            }
                        }
                        formItem.push(<Label ref={formElement.name}
                                             key={formElement.name}
                                             refName={formElement.name}
                                             title={formElement.title}
                                             icon={icon}
                                             defaultValue={formElement.defaultValue}/>);
                    }
                        break;
                    case "input":
                        formItem.push(<Input
                            ref={formElement.name}
                            key={formElement.name}
                            refName={formElement.name}
                            title={formElement.title}
                            defaultValue={formElement.defaultValue}/>);
                        break;
                    case "file":
                        formItem.push(<FileUploader
                            ref={formElement.name}
                            key={formElement.name}
                            refName={formElement.name}
                            title={formElement.title}
                            defaultValue={formElement.defaultValue}/>);
                        break;
                    case "selectList":
                        formItem.push(
                            <SelectList
                                ref={formElement.name}
                                key={formElement.name}
                                refName={formElement.name}
                                title={formElement.title}
                                defaultValue={formElement.defaultValue}
                                options={formElement.options}
                            />
                        );
                        break;
                    case "selector":
                        formItem.push(
                            <Selector
                                ref={formElement.name}
                                key={formElement.name}
                                refName={formElement.name}
                                title={formElement.title}
                                defaultValue={formElement.defaultValue}
                                selections={formElement.selections}
                            />
                        );
                        break;
                }
            });
        }
        return formItem;
    },
    handleSave: function () {
        //saves
        var thisOb = this;
        var form = new FormData();
        this.props.FormData.map(function (formElement) {
            if (formElement.type == "file") {
                form.append(formElement.name, thisOb.refs[formElement.name].getFile());
                form.append(formElement.name, thisOb.refs[formElement.name].getValue());
            } else {
                form.append(formElement.name, thisOb.refs[formElement.name].getValue());
            }
        });
        thisOb.props.saveForm(form);
    },
    render: function () {
        return (
            <div className="Form" style={{height:"100%"}}>
                <div
                    style={{minWidth:"530px",maxWidth:"770px",width:"95%",overflowY:"auto",maxHeight:"calc(100% - 50px)"}}>
                    {this._renderForm()}
                </div>
                <div style={{minWidth:"530px", maxWidth:"770px",width:"97%",paddingTop:"10px"}}>
                    <div onClick={this.handleSave}
                         style={{cursor:"pointer",width: "70px",height: "30px",fontSize:"13px",backgroundColor:"#303c40",padding:" 6px 16px",float:"right",marginLeft:"638px",marginRight:"20px"}}>
                        <span style={{marginLeft:"5px",color:"white"}}>保存</span>
                    </div>
                </div>
            </div>
        )
    }
})

module.exports = Form;